<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <FormItem label="客户名称">
                <RemoteSelect url="common/select/customer" v-model="search.customer_id" size="small"></RemoteSelect>
            </FormItem>
            <FormItem label="产品代码">
                <Input v-model="search.code" size="small"></Input>
            </FormItem>
            <FormItem label="品牌">
                <Input v-model="search.brand" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="success" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button type="success" icon="ios-add" @click="openComponent('ICreate')" size="small">添加</Button>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="customer">
                <span>{{row.customer.code}}:{{row.customer.name}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="unique">
                <span>{{row.customs.unique}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === 0">草稿</span>
                <span v-if="row.status === 1">待审核</span>
                <span v-if="row.status === 2">审核失败</span>
                <span v-if="row.status === 3">正常</span>
                <span v-if="row.status === 4">出货冻结</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <PoptipButton v-if="row.status === 1" size="small" content="确认要通过审核吗?" @on-ok="submitForReview(row.id)">
                    审核
                </PoptipButton>
                <PoptipRemark v-if="row.status === 3" size="small" type="default"
                              @on-submit="submitForFreeze($event, row.id)" title="冻结"></PoptipRemark>
                <PoptipButton v-if="row.status === 4" size="small" content="确认要解结吗?" @on-ok="submitForThaw(row.id)">解结
                </PoptipButton>
                <PoptipRemark v-if="row.status === 1" size="small" type="default"
                              @on-submit="submitForReject($event, row.id)" title="驳回"></PoptipRemark>
                <Button v-if="row.status !== 0" size="small" @click="openComponent('IIView', {id: row.id})">查看</Button>
                <Button v-if="row.status === 0 || row.status === 2" size="small"
                        @click="openComponent('IUpdate', {id: row.id})">编辑
                </Button>
                <PoptipButton v-if="row.status === 0" size="small" content="确认要提交审核吗?"
                              @on-ok="submitForConfirm(row.id)">确认
                </PoptipButton>
                <PoptipButton v-if="row.status === 0" size="small" content="确认要删除产品吗?"
                              @on-ok="submitForDestroy(row.id)">删除
                </PoptipButton>
                <Button v-if="row.status === 3 || row.status === 4" size="small"
                        @click="openComponent('IConsumable', {id: row.id})">选择耗材
                </Button>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value" :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IUpdate from "./update"
    import ICreate from "./create"
    import IIView from "./view"
    import IConsumable from "./consumable"
    import RemoteSelect from "../../../components/form/remoteSelect";
    import PoptipButton from "../../../components/content/poptipButton";
    import PoptipRemark from "../../../components/content/poptipRemark";

    export default {
        name: "index",
        components: {PoptipRemark, PoptipButton, RemoteSelect, ITable, ISearch, IContent, IUpdate, ICreate, IIView, IConsumable},
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [
                        {
                            title: '产品代码',
                            key: 'code',
                            width: 150
                        },
                        {
                            title: '客户代码',
                            slot: 'customer',
                            width: 150
                        },{
                            title: '海关料号',
                            slot: 'unique',
                            width: 150
                        },
                        {
                            title: '产品标题',
                            key: 'title',
                            ellipsis: true
                        }, {
                            title: '产品毛重',
                            key: 'gross_weight',
                            width: 150
                        }, {
                            title: '品牌',
                            key: 'brand',
                            width: 150
                        }, {
                            title: '产品状态',
                            slot: 'status',
                            width: 150
                        },
                        {
                            title: '操作',
                            slot: 'action',
                            width: 200
                        }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page) {
                this.loading = true;
                this.$http.get(`product/index`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForConfirm(id) {
                this.loading = true;
                this.$http.put(`product/index/${id}/confirm`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForReview(id) {
                this.loading = true;
                this.$http.put(`product/index/${id}/review`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForFreeze(remark, id) {
                this.loading = true;
                this.$http.put(`product/index/${id}/freeze`, {remark}).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForReject(remark, id) {
                this.loading = true;
                this.$http.put(`product/index/${id}/reject`, {remark}).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForThaw(id) {
                this.loading = true;
                this.$http.put(`product/index/${id}/thaw`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForDestroy(id) {
                this.loading = true;
                this.$http.delete(`product/index/${id}`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
